<!--
 * @Author: YNT 2501512800@qq.com
 * @Date: 2022-06-19 15:06:46
 * @LastEditors: YNT 2501512800@qq.com
 * @LastEditTime: 2023-01-09 10:16:01
 * @FilePath: \智慧社区的副本\src\views\integral\order.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-loading="isLoading"
       class="container">

    <el-card :key="isKey">
      <template #header>
        <div class="table_tool">
          <el-button type="success"
                     @click="exportExcel">导出兑换报表</el-button>
        </div>
      </template>

      <el-table id="out-table"
                :data="tableData"
                border
                stripe>
        <el-table-column prop="goods_name"
                         label="商品名称" />
        <el-table-column prop="goods_price"
                         label="所需积分" />
        <el-table-column prop="goods_banner"
                         label="商品图片">
          <template slot-scope="{ row }">
            <el-image style="width: 80px; height: 80px"
                      :src="row.goods_banner"
                      :preview-src-list="[row.goods_banner]" />
          </template>
        </el-table-column>
        <el-table-column prop="goods_stock"
                         label="商品库存" />
        <el-table-column prop="user_name"
                         label="实名信息" />
        <el-table-column prop="user_phone"
                         label="用户手机号" />
        <el-table-column prop="admin_user_name"
                         label="核销人" />
        <el-table-column prop="repair_time"
                         label="核销时间" />
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[ 20, 30, 50, 100]"
                     :page-size="searchForm.page_size"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

  </div>
</template>

<script>
import API from '@/api'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { table, addOrEdit } from '@/utils/mixins'
export default {
  mixins: [table, addOrEdit],

  data: () => ({
    communityId: '', // 社区活动id
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 20 // 每页条数
    }
  }),

  created () {
    this.getList()
  },

  methods: {
    // 获取列表
    getList () {
      this.isLoading = true
      API.getIntegralOrderList(this.searchForm).then(({ data }) => {
        this.tableData = data.items
        this.tableTotal = data.total
      }).catch(() => {
        this.tableData = []
        this.tableTotal = 0
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    },

    exportExcel () {
      const activityName = this.activityName
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `积分商品兑换记录.xlsx`
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
